<template>
  <div class="index">
    <el-container>
      <el-aside width="250px">
        <div class="top">
          <div class="left">
            <el-icon size="18px"><HomeFilled /></el-icon>
            考勤管理
          </div>
          <div class="right">
            <el-icon color="#494f57"><MoreFilled /></el-icon>
            &nbsp;
            <el-icon color="#fb9337"><CirclePlusFilled /></el-icon>
          </div>
        </div>
        <!-- 左侧导航菜单 -->
        <el-menu
          active-text-color="#fb937c"
          default-active="/Index/business"
          class="el-menu-vertical-demo"
          @select="handleSelect"
        >
          <!-- 一个 menu-item 就是一个菜单项 -->
          <el-menu-item index="/Index/business">
            <el-icon><Tickets /></el-icon>
            <span>出差申请</span>
          </el-menu-item>
          <el-menu-item index="/Index/outside">
            <el-icon><Tickets /></el-icon>
            <span>外勤打卡</span>
          </el-menu-item>
          <el-menu-item index="/Index/leave">
            <el-icon><Tickets /></el-icon>
            <span>请假申请</span>
          </el-menu-item>
          <el-menu-item index="/Index/work">
            <el-icon><Tickets /></el-icon>
            <span>加班申请</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 占位组件 -->
      <router-view></router-view>
    </el-container>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
var $router = useRouter();

//点击菜单项, 通过参数index获取路由地址, 跳路由
var handleSelect = (index) => {
  $router.push(index);
};
</script>

<style scoped lang="scss">
.is-active {
  background-color: #fcebdc;
}
.top {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  .left {
    font-weight: 700;
    font-size: 16px;
  }
}
</style>